import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
      redirect: "/lines"
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    },
    {
      path: "/lines",
      name: "lines",
      meta: {
        title: "lines"
      },
      component: () => import("./views/lines/Lines.vue")
    },
    {
      path: "/bars",
      name: "bars",
      meta: {
        title: "bars"
      },
      component: () => import("./views/bars/Bars.vue")
    },
    {
      path: "/effect",
      name: "effect",
      meta: {
        title: "effect"
      },
      component: () => import("./views/effects/Effect.vue")
    },
    {
      path: "/effectCss",
      name: "effectCss",
      meta: {
        title: "effect-css"
      },
      component: () => import("./views/css/Css.vue")
    },
    {
      path: "/hoverCss",
      name: "hoverCss",
      meta: {
        title: "hover-css"
      },
      component: () => import("./views/hover/Hover.vue")
    },
    {
      path: "/background",
      name: "background",
      meta: {
        title: "background"
      },
      component: () => import("./views/background/Background.vue")
    },
    {
      path: "/canvas",
      name: "canvas",
      meta: {
        title: "canvas"
      },
      component: () => import("./views/canvas/Canvas.vue")
    },
    {
      path: "/d3",
      name: "d3",
      meta: {
        title: "d3"
      },
      component: () => import("./views/canvas/Canvas.vue"),
      redirect: "/d3/redirect",
      children: [
        {
          path: "test",
          name: "d3_test",
          component: () => import("./views/canvas/Canvas.vue")
        }
      ]
    }
  ]
});
